<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="../../img/favicon.ico" type="image/x-icon">
    <title>个人空间</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 50vh;
            margin: 0;
        }

        h1 {
            color: orangered;
            margin-top: 0;
        }
    </style>
    <!-- Please avoid using this layui.css URL in a production environment -->
</head>

<body>
<h1>我的个人空间</h1>
<form id="biao" class="layui-form">
    <div class="layui-form-item">
        <div class="layui-input-group">
            <div class="layui-input-prefix">
                昵称
            </div>
            <input id="showName" type="text" name="showName" placeholder="请输入您的昵称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-group">
            <div class="layui-input-split layui-input-prefix">
                手机号
            </div>
            <input id="tel" type="text" name="tel" placeholder="请输入您的手机号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-group">
            <div class="layui-input-split layui-input-prefix">
                密码
            </div>
            <input id="password" type="text" name="password" placeholder="请输入您的密码" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-group">
            <div class="layui-input-split layui-input-prefix">
                邮箱
            </div>
            <input id="email" type="text" name="email" placeholder="请输入邮箱" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" pane>
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="男" checked>
            <input type="radio" name="sex" value="0" title="女">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-group">
            <div class="layui-input-split layui-input-prefix">
                地址
            </div>
            <input id="address" type="text" name="address" placeholder="请输入收获地址" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button id="upbutton" class="layui-btn" lay-submit lay-filter="demo1">提交</button>
        <button id="getbutton" type="button" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

<!-- Please avoid using this layui.js URL in a production environment -->
<script src="../../layui/layui.js"></script>
<script>

    layui.use(['element', 'layer', 'util', 'form'], function () {
        // var element = layui.element;
        var layer = layui.layer;
        // var util = layui.util;
        var laytpl = layui.laytpl;
        var $ = layui.jquery;
        var $ = layui.$;
        var form = layui.form;

        form.on('submit(demo1)', function (data) {
            var field = data.field; // 获取表单字段值
            // 此处可执行 Ajax 等操作

            $.ajax({
                url: '/myroom/user', // 替换为后端接口地址
                type: 'GET',
                data: field,
                success: function () {
                    layer.msg("提交成功");
                },
                error: function () {
                    layer.msg('提交失败');
                }

            });
            return false; // 阻止默认 form 跳转
        });
        $.ajax({
            url: '/myroom/init', // 替换为后端接口地址
            type: 'GET',
            success: function (data) {
                $("#showName").val(data.data.showName);
                $("#tel").val(data.data.tel);
                $("#password").val(data.data.password);
                $("#email").val(data.data.email);

                // 更新性别的radio
                $("input[name='sex'][value='" + data.data.sex + "']").prop("checked", true);

                $("#address").val(data.data.address);

                form.render(); // 重新渲染表单，确保更新的值生效
            },
            error: function () {
                layer.msg('个人信息获取失败');
            }
        });

        $("#getbutton").on('click',function () {
            $.ajax({
                url: '/myroom/init', // 替换为后端接口地址
                type: 'GET',
                success: function (data) {
                    $("#showName").val(data.data.showName);
                    $("#tel").val(data.data.tel);
                    $("#password").val(data.data.password);
                    $("#email").val(data.data.email);

                    // 更新性别的radio
                    $("input[name='sex'][value='" + data.data.sex + "']").prop("checked", true);

                    $("#address").val(data.data.address);

                    form.render(); // 重新渲染表单，确保更新的值生效
                },
                error: function () {
                    layer.msg('个人信息获取失败');
                }
            });
        });
    });
</script>
</body>

</html>
